<script setup>
import AppAside from '@/components/app-page/app-aside.vue';
import AppHeader from '@/components/app-page/app-header.vue'
import AppBody from '@/components/app-page/app-body.vue';
import AppFooter from '@/components/app-page/app-footer.vue'
</script>

<template>
  <section class="layout">
    <el-container>
      <AppAside />
      <section class="main">
        <AppHeader />
        <AppBody />
        <AppFooter />
      </section>
    </el-container>
  </section>
</template>

<style scoped>
.layout {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
}
.main {
  position: relative;
  flex: 1;
}
.el-header {
  position: sticky;
  top: 0;
}
.el-footer {
  display: flex;
  align-items: center;
}
</style>
